import React,{ Fragment,useEffect,useState } from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import './index.less'

import TopBar from '../../../components/TopBar/TopBar'
import FloorBar from '../../../components/FloorBar/FloorBar'
import CommentContent from '../../../components/CommentContent/CommentContent'
import LessonCard from '../../../components/LessonCard/LessonCard'


import utils from '../../../util/utils'
import http from '../../../util/http'

function ClassHour() {
  const navigate = useNavigate ();
  const location = useLocation();
  const params= useParams();
  console.log(location,params)
  const [lesson,setLesson] = useState({
    Id:'1',
    Title:"Web前端开发JavaScript高薪课堂啊啊Web前端b前端开发JavaScript高薪课堂",
    UserId:"1",
    User:{
      Id: "1",
      Nickname: "范征远",
      AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      PhoneNumber: "13142211138",
      Email: "1954418428@qq.com",
      Sex: 1,
      Birthday: '2000-11-10',
      Description: `怀化学院本科毕业，23届应届生，专业成绩优，参加各种比赛。
          喜欢挑战，酷爱难的东西。热爱前端技术，对各种前端后端、算法等知识技术都比较熟悉。
          后续会在本网站上依次推出这些课程。`
    },
    ImgUrl:"https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAf1icyicZicuHUIBe2zic6UiaCwA4ekE7QJdGicagv0WIHBOt6cvuAI2LibupjCZKrdns5fI/356",
    ChapterCount:10,
    ClassHourCount:80,
    Description:"描述描述描述描述描述描述描述描述描述描述描述描述",
    IsEnd:true,
    Count:{
      LikeCount:520,
      CollectCount:1000,
      VisitCount:12321,
      CommentCount:68,
      ResourceId:'1',
      ResourceType:2
    },
    CategoryList:[
      {
        Id:"1",
        CategoryName:"类别1"
      },
      {
        Id:"2",
        CategoryName:"类别2"
      },
      {
        Id:"3",
        CategoryName:"类别3"
      }
    ],
  })
  const [classhour,setClasshour] = useState(
    {
      Id:'1',
      ChapterId:'1',
      Sort:1,
      Title:"课时课时课时课时课时",
      Time:60,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Count:{
        LikeCount:520,
        CollectCount:1000,
        VisitCount:12321,
        CommentCount:68,
        ResourceId:'1',
        ResourceType:3
      },
      Status:1,
      CreateTime:"2022-1-1",
      ModifyTime:"2022-1-1",
    }
  )
  const [chapterList,setChapterList]= useState([
    {
      Id:"1",
      LessonId:"1",
      Sort:1,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'1',
          ChapterId:'1',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'2',
          ChapterId:'1',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    },
    {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    },
    {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    }, {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    }, {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    },
    {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    }
  ])

  const [commentList,setCommentList] = useState([
    {
      Id:'1',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    },
    {
      Id:'2',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    },
    {
      Id:'3',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    }
  ])

  const goLessonList = (e,item)=>{
    e.stopPropagation()
    navigate(`/LessonList?activeOrderId=${0}&activeCategoryId=${item.Id}`)
  }

  useEffect(()=>{
    console.log("执行");
  },[])
  let arr = [];
  for(let i = 0 ;i<4;i++){
    arr.push(i);
  }
  return (
    <Fragment >
      <TopBar activeIndex={1} ></TopBar>
      
      <div className="classhour root-cont">
        <div className="classhour-wrap">
          <div className="classhour-categorylist">
            <div className="categorylist-wrap">
              
              {
                lesson.CategoryList.map((item,index)=>(
                  <div className="category-item" key={index} onClick={(e)=>goLessonList(e,item)}>
                    {item.CategoryName}
                  </div>
                ))
              }
            </div>
            
          </div>
          <div className="classhour-src-wrap">
            <div className="player-wrap">
            <video id="player-ele" 
            className="player-ele" 
            controls="controls"
            // autoPlay="" 
            // preload="auto" 
            >
              <source src="https://prod-streaming-video-msn-com.akamaized.net/a5418708-7037-447c-b54a-52cee3a36015/0552ee45-d456-4fb7-ad34-9f884d5b8515.mp4" type="video/mp4" />
              <source src="https://prod-streaming-video-msn-com.akamaized.net/a5418708-7037-447c-b54a-52cee3a36015/0552ee45-d456-4fb7-ad34-9f884d5b8515.mp4"type="video/ogg"/>
              您的浏览器不支持此种视频格式。
            </video>
            </div>
            <div className="catalogue-wrap">
              {
                chapterList && chapterList.map((item, index)=>(
                  <div className="" key={index}>
                    <div className="chapter-name" title={item.Title}>
                      <span className="idx">
                        {(((index+1)+'').length ==1 ? 0 :'')}{index+1}.
                      </span>
                      <span>
                        {item.Title}
                      </span>
                    </div>
                    <div>
                      {item.ClasshourList && item.ClasshourList.map((item,index2)=>(
                          <div className="" key={index2}>
                            <div className="classhour-name" title={item.Title}>
                              <span className="idx">
                                {index+1}.{index2+1}.
                              </span>
                              <span>
                                {item.Title}
                              </span>
                              <span className="">
                                {item.Time}
                              </span>
                            </div>
                          </div>
                        ))
                      }
                    </div>
                  </div>
                ))
              }
            </div>
          </div>

          <div className="classhour-info">
              <div className="classhour-count">
                <div className="count-item">
                  <i className="iconfont icon-chakan"></i>
                  <span className="count">{classhour.Count.VisitCount}</span>
                </div>
                <div className="count-item">
                  <i className="iconfont icon-dianzan"></i>
                  <span className="count">{classhour.Count.LikeCount}</span>
                </div>
          
                <div className="count-item">
                  <i className="iconfont icon-shoucang"></i>
                  <span className="count">{classhour.Count.CollectCount}</span>
                </div>
              </div>
              <div className="classhour-name">
                {classhour.Title}
              </div>
              
          </div>
          <div className="bottom-box">
              <div className="comment-list">
                <div className="head">
                  <span className="count">共{classhour.Count.CommentCount}条评论</span>
                  <span className="comment-action">我要评论</span>
                </div>

                {
                  commentList && commentList.map((item,index)=>(
                    <dir className="comment-item" key={index}>
                      <CommentContent Comment={item}></CommentContent>
                    </dir>
                  ))
                }
              </div>
              <div className="recommend-lesson-list">
                <div className="head">
                  <span>
                    换一批
                  </span>
                </div>
                {
                  arr.map((item, index)=>(
                    <div className="lesson-item" key={index}>
                      <LessonCard ></LessonCard>
                    </div>
                  ))
                }
                <i className="mark-i"></i>
                <i className="mark-i"></i>
                <i className="mark-i"></i>
                <i className="mark-i"></i>
              </div>
          </div>
        </div>
      </div>
    
      <FloorBar></FloorBar>        
    </Fragment>
    
  )
}

export default ClassHour;